<template>
    <div>
        <el-table :data="paginatedData" style="width: 100%" border @row-click="handleRowClick"
            :row-class-name="addPointerCursor">
            <el-table-column prop="time" label="发生时间" width="180" />
            <el-table-column prop="title" label="告警内容" min-width="200" />
            <el-table-column prop="severityText" label="级别" width="100">
                <template #default="scope">
                    <el-tag :type="getAlarmTagType(scope.row.severityText)">
                        {{ scope.row.severityText }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="location" label="位置" width="200" />
            <el-table-column prop="type" label="类型" width="120" />
            <el-table-column prop="update_time" label="事件状态更新时间" width="120" />
            <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                    <el-tag :type="getStatusTagType(scope.row.status)">
                        {{ getStatusText(scope.row.status) }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="130" fixed="right">
                <template #default="scope">
                    <el-link type="primary" :underline="false" style="margin-right: 1rem;"
                        @click.stop="viewDetail(scope.row)">
                        详情
                    </el-link>
                    <el-link v-permission="['handle_exceptions']" type="primary" :underline="false"
                        @click.stop="restoreAlarm(scope.row)">
                        恢复报警
                    </el-link>
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加分页组件 -->
        <div class="pagination-container">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
                :total="props.resolvedAlarms.length" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" background />
        </div>

        <!-- 引入告警详情组件，直接传递当前行数据 -->
        <AlarmDetail v-model:visible="detailVisible" :current-alarm="currentAlarmRow" @close="handleDetailClose" />
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { updateEventApi } from '@/api/event'
import { handleError } from '@/utils/handleError'
import { ElMessage } from 'element-plus'
import AlarmDetail from './components/AlarmDetail.vue'

const emit = defineEmits(['refreshData'])
const props = defineProps({
    resolvedAlarms: {
        type: Array,
        default: () => []
    }
})

// 分页相关状态
const currentPage = ref(1)
const pageSize = ref(10)

// 根据当前页和每页条数计算分页后的数据
const paginatedData = computed(() => {
    const startIndex = (currentPage.value - 1) * pageSize.value
    return props.resolvedAlarms.slice(startIndex, startIndex + pageSize.value)
})

// 处理页码变化
const handleCurrentChange = (newPage) => {
    currentPage.value = newPage
}

// 处理每页显示条数变化
const handleSizeChange = (newSize) => {
    pageSize.value = newSize
    // 当切换每页条数时，如果当前页码超出范围，则重置为第一页
    if (currentPage.value > Math.ceil(props.resolvedAlarms.length / pageSize.value)) {
        currentPage.value = 1
    }
}

// 控制告警详情对话框显示状态
const detailVisible = ref(false)
// 当前查看的告警行数据
const currentAlarmRow = ref(null)

// 添加鼠标指针样式类
const addPointerCursor = () => {
    return 'clickable-row'
}

// 处理行点击事件
const handleRowClick = (row) => {
    viewDetail(row)
}

const getAlarmTagType = (severity) => {
    const types = {
        '提示': 'info',
        '警告': 'warning',
        '严重': 'danger'
    }
    return types[severity] || 'info'
}

const getStatusTagType = (status) => {
    switch (status) {
        case 2:
            return 'success' // 已处理
        case 3:
            return 'warning' // 已忽略
        default:
            return 'info'
    }
}

const getStatusText = (status) => {
    switch (status) {
        case 2:
            return '已处理'
        case 3:
            return '已忽略'
        default:
            return '未知'
    }
}

const viewDetail = (record) => {
    console.log('查看详情:', record.id)
    currentAlarmRow.value = record  // 直接保存整行数据
    detailVisible.value = true
}

const handleDetailClose = () => {
    currentAlarmRow.value = null
}

const restoreAlarm = async (record) => {
    try {
        await updateEventApi({
            id: record.id,
            status: 1,
            info: ''
        })
        ElMessage.success('恢复报警成功')
        emit('refreshData')
    } catch (error) {
        handleError(error, '恢复报警失败')
    }
}
</script>

<style scoped>
.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.clickable-row {
    cursor: pointer;
}
</style>